<template>
    <div>
      <el-card>
        <template #header>
          <h1>学生选课系统</h1>
        </template>
        <h2>全部课程列表</h2>
        <el-table :data="courseStore.courseSchedules" stripe>
          <el-table-column prop="course.courseName" label="课程名称"></el-table-column>
          <el-table-column prop="course.courseId" label="课程号"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                :disabled="isAlreadySelected(scope.row)"
                @click="courseStore.selectCourse(scope.row.id)"
              >
                {{ isAlreadySelected(scope.row)? '已选' : '选课' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <el-card>
        <template #header>
          <h2>已选课程列表</h2>
        </template>
        <el-table :data="courseStore.selectedCourses" stripe>
          <el-table-column prop="course.courseName" label="课程名称"></el-table-column>
          <el-table-column prop="courseId" label="课程号"></el-table-column>
          <el-table-column prop="teacher.name" label="教师"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="courseStore.cancelSelectCourse(scope.row.id)">取消选课</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { useCourseStore } from '@/stores/course';
import type { CourseSchedule } from '@/types/course';
  
  const courseStore = useCourseStore();

  const isAlreadySelected = (courseSchedule: CourseSchedule) => {
    return courseStore.selectedCourses.some(
      (selectedCourse) => selectedCourse.courseId === courseSchedule.courseId
    );
  }

  onMounted(() => {
    courseStore.fetchCourseSchedules(); // 初始化时获取课程列表 
    courseStore.fetchSelectedCourses()
    console.log(isAlreadySelected(courseStore.courseSchedules[0]))
    
  })
  </script>
  
  <style scoped>
  /* 可以根据需要添加样式
   */
  </style>